<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<meta name="keywords" content="admin, dashboard, bootstrap, template, flat, modern, theme, responsive, fluid, retina, backend, html5, css, css3" />
	<meta name="description" content="" />
	<meta name="author" content="ThemeBucket" />
	<link rel="shortcut icon" href="${BASE_PATH}/favicon.ico" type="image/png" />
	
	<title>我的信息</title>
	
	<!--icheck-->
	<link href="${BASE_PATH}/js/iCheck/skins/minimal/minimal.css"
		rel="stylesheet" />
	<link href="${BASE_PATH}/js/iCheck/skins/square/square.css"
		rel="stylesheet" />
	<link href="${BASE_PATH}/js/iCheck/skins/square/red.css"
		rel="stylesheet" />
	<link href="${BASE_PATH}/js/iCheck/skins/square/blue.css"
		rel="stylesheet" />
	<!--dashboard calendar-->
	<link href="${BASE_PATH}/css/clndr.css" rel="stylesheet" />
	
	<!--Morris Chart CSS -->
	<link rel="stylesheet" href="${BASE_PATH}/js/morris-chart/morris.css" />
	
	<!--common-->
	<link href="${BASE_PATH}/css/style.css" rel="stylesheet" />
	<link href="${BASE_PATH}/css/style-responsive.css" rel="stylesheet" />
  	<!-- 表格需要 -->
  		<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<!-- 集成优秀学长的js 与 css -->
	<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(function () {  
            var table_title=$("#table_title");
            var title_children=table_title.children("td");
            var t_table=$("#time_table");
            var table_tr=t_table.children("tr");
            var screen_width=window.screen.width;//获取屏幕宽
            var t_children=1; 
            if(screen_width>=425){
                t_children=title_children.length-1;
            }else t_children=title_children.length;//判断是否是移动端的形式
            for(i=0;i<table_tr.length;i++) {//i代表时间点
                for (ii=0;ii<t_children;ii++){//ii代表的会议室
                    var append_td=document.createElement("td");
                    append_td.innerHTML=(i+1)+"_"+(ii+1);//写入td内容
                    $(append_td).attr('id',i+"_"+ii);
                    $(append_td).attr('class',"td_list");
                    if(timesList[i][ii] == 1){//判断是否被占用
                        $(append_td).attr('class',"td_list busy");
                    }/*已占用的房间的标记 填进判断条件里 就添加了busy标签了 这里只是做个示例*/
                    if(timesList[i][ii] == 2){//判断时间已到
                        $(append_td).attr('class',"td_list overtime");
                    }/*时间快到的房间的标记 填进判断条件里 就添加了overtime标签了 这里只是做个示例*/
                    document.getElementById("table_tr"+(i+1)).appendChild(append_td);
                }
            }//生成表内内容
        })//网页加载完成后运行
    </script>
    <style>
        #time_table{
            text-align: center;
            background-color: #4acacb;
            box-shadow: 0 5px 0 #42b5b6;
            border-spacing: 0 2px;border-radius:0 0 5px 5px;
            color: white;
            margin:50px 150px 150px 100px;
            width:1000px;
        }
        #table_title{
            background-color: #fc8675;box-shadow:0 5px 0 #e27869;
            padding:15px 10px;
            border-radius: 4px;
            font-weight: bold;
            height:50px;
        }
        .time_td{
            background: #6a8abe;
            box-shadow: 0 5px 1px #5f7cab;
            border-radius: 5px;
            height:50px;
            width:150px;

        }/*默认样式：空闲 还算像绿色吧*/
        .td_list:hover{
            background-color: rgba(102,255,153,0.5);
            box-shadow: 0 4px 0 #0bde52;border-radius: 5px;
        }/*移动端hover效果要点击后才能出现 所以移动端移除这个hover样式就是了*/
        .td_list.overtime{
            background-color: #f5f52f;
            box-shadow: 0 5px 0 #abab25;
            border-spacing: 0 2px;border-radius:5px;
            color: #a1a1a1;
        }/*时间快到 样式*/
        .td_list.overtime:hover{
            background-color: #fcfc5a;
            box-shadow: 0 4px 0 #d0d02a;border-radius:5px;
            color: #9FAFD1;
        }
        .td_list.busy{
            background-color: #FF3333;
            box-shadow: 0 5px 0 #CC3333;
            border-spacing: 0 2px;border-radius:5px;
            color: #ffd1d1;
        }/*已占用 样式*/
        .td_list.busy:hover{
            background-color: #FF6666;
            box-shadow: 0 4px 0 #CC6666;border-radius:5px;
            color: #ffd1d1;
        }
      
    </style>



<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="${BASE_PATH}/js/html5shiv.js"></script>
  <script src="${BASE_PATH}/js/respond.min.js"></script>
  <![endif]-->
</head>
<body class="sticky-header">
    <!-- 原文 -->
	<section> 
		<jsp:include page="menu.jsp"></jsp:include> 
	<div class="main-content">

		<jsp:include page="top.jsp"></jsp:include>
		

		<!--body wrapper start-->
		<div class="wrapper">
			<div class="row">
				<div class="col-md-12">
					<!--statistics start-->
					<div class="row state-overview">
						<div class="col-md-6 col-xs-12 col-sm-6">
														<!-- 集成学长所写的前端表格 -->
<table id="time_table" style="" frame="above">
        <tr id="table_title">
        </tr>
    </table>
    <script>
        var meeting_list=${room.size()};//会议室个数
        var time_list= 17 ;//时间表的个数 由于时间间隔固定，所以先将其限制用于修改
        var timesStartTime = new Array();
        var timesEndTime = new Array();
        var timesList = new Array();
        for(var i = 0; i < time_list; i++){
        	timesList[i] = new Array();
        }
        var roomName = new Array();
        //console.info("info");  
        <c:forEach items="${time}" var="item" varStatus="status" >  
            timesStartTime.push("${item.StartTime}");
            timesEndTime.push("${item.EndTime}");
            timesList[0].push("${item.Time_0}");   // 提取每个时间片的状态，从6:00-23:00
        	timesList[1].push("${item.Time_1}");
			timesList[2].push("${item.Time_2}");
			timesList[3].push("${item.Time_3}");
			timesList[4].push("${item.Time_4}");
			timesList[5].push("${item.Time_5}");
			timesList[6].push("${item.Time_6}");
			timesList[7].push("${item.Time_7}");
			timesList[8].push("${item.Time_8}");
			timesList[9].push("${item.Time_9}");
			timesList[10].push("${item.Time_10}");
			timesList[11].push("${item.Time_11}");
			timesList[12].push("${item.Time_12}");
			timesList[13].push("${item.Time_13}");
			timesList[14].push("${item.Time_14}");
			timesList[15].push("${item.Time_15}");
			timesList[16].push("${item.Time_16}");
		</c:forEach>
        <c:forEach items="${room}" var="item" varStatus="status" >  
            roomName.push("${item.RoomName}");
        </c:forEach>
        var screen_width=window.screen.width;//获取屏幕宽
        if(screen_width>=425){
            var append_td=document.createElement("td");
            append_td.innerHTML="时间";
            document.getElementById("table_title").appendChild(append_td);
        }//判断为手机宽度 符合条件"宽度>425" 就开始创建“时间”td
        for(i=0;i<meeting_list;i++){
            var append_td=document.createElement("td");
            append_td.innerHTML=roomName[i];  //会议室名称
            $(append_td).attr('id',"meeting_room"+i+1);
            $(append_td).attr('class',"meeting_room");
            document.getElementById("table_title").appendChild(append_td);
        }//生成会议室的tr
        for(i=0;i<time_list;i++){
            var append_tr=document.createElement("tr");
            if(screen_width>=425){
                var append_td=document.createElement("td");
                append_td.innerHTML=i+6 + ":00-" + (i+7) + ":00";//时间段名称
                $(append_td).attr('id',"time_list"+(i+1));
                $(append_td).attr('class',"time_td");
                append_tr.appendChild(append_td);
            }//判断为手机宽度
            $(append_tr).attr('id',"table_tr"+(i+1));

            document.getElementById("time_table").appendChild(append_tr);
        }//生成时间表的tr、tb
    </script>
                        </div>
                    </div>
				</div>
				<!--body wrapper end-->
				<!--footer section start-->
				<jsp:include page="foot.jsp"></jsp:include>
				<!--footer section end-->
			</div>
		</div>
	</div>
	<!-- main content end-->
	</section>

	<!-- Placed js at the end of the document so the pages load faster -->
	<script src="${BASE_PATH}/js/jquery.min.js"></script>
	<script src="${BASE_PATH}/js/jquery-ui-1.9.2.custom.min.js"></script>
	<script src="${BASE_PATH}/js/jquery-migrate-1.2.1.min.js"></script>
	<script src="${BASE_PATH}/js/bootstrap.min.js"></script>
	<script src="${BASE_PATH}/js/modernizr.min.js"></script>
	<script src="${BASE_PATH}/js/jquery.nicescroll.js"></script>

	<!--easy pie chart-->
	<script src="${BASE_PATH}/js/easypiechart/jquery.easypiechart.js"></script>
	<script src="${BASE_PATH}/js/easypiechart/easypiechart-init.js"></script>

	<!--Sparkline Chart-->
	<script src="${BASE_PATH}/js/sparkline/jquery.sparkline.js"></script>
	<script src="${BASE_PATH}/js/sparkline/sparkline-init.js"></script>

	<!--icheck -->
	<script src="${BASE_PATH}/js/iCheck/jquery.icheck.js"></script>
	<script src="${BASE_PATH}/js/icheck-init.js"></script>

	<!-- jQuery Flot Chart-->
	<script src="${BASE_PATH}/js/flot-chart/jquery.flot.js"></script>
	<script src="${BASE_PATH}/js/flot-chart/jquery.flot.tooltip.js"></script>
	<script src="${BASE_PATH}/js/flot-chart/jquery.flot.resize.js"></script>

	<!--Morris Chart-->
<!-- 	<script src="${BASE_PATH}/js/morris-chart/morris.js"></script> -->
	<script src="${BASE_PATH}/js/morris-chart/raphael-min.js"></script>

	<!--Calendar-->
	<script src="${BASE_PATH}/js/calendar/clndr.js"></script>
	<script src="${BASE_PATH}/js/calendar/evnt.calendar.init.js"></script>
	<script src="${BASE_PATH}/js/calendar/moment-2.2.1.js"></script>
	<script src="${BASE_PATH}/js/underscore-min.js"></script>

	<!--common scripts for all pages-->
	<script src="${BASE_PATH}/js/scripts.js"></script>

	<!--Dashboard Charts-->
<!-- 	<script src="${BASE_PATH}/js/dashboard-chart-init.js"></script> -->
</body>
</html>
